import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import Button from '../src/components/button/button.vue';
import ButtonGroup from '../src/components/button/button-group.vue';

<Meta title="通用/Button 按钮" component={Button} />

# Button 按钮

### 引入组件

```js
import { Button } from 'graceful-ui';
```

### 类别

<Preview>
  <Story name="type 类别">
    {{
      components: { Button },
      template: `
        <div>
            <Button type="primary">主色</Button> 
            <Button type="warning">警告</Button> 
            <Button type="error">错误</Button> 
            <Button type="success">成功</Button> 
            <Button type="info">信息</Button> 
            <Button type="disabled">禁用</Button> 
            <Button type="dashed">虚线框</Button> 
            <Button>默认</Button> 
        </div>
      `,
    }}
  </Story>
</Preview>

### 大小

`size`参数可以用来指定按钮形状,可选参数为`large`,`small`, 默认为`default`

<Preview>
  <Story name="size 大小">
    {{
      components: { Button },
      template: `
        <div>
            <Button type="primary" size="large">主色</Button> 
            <Button type="warning">警告</Button> 
            <Button type="error" size="small">错误</Button> 
            <Button type="success" size="large">成功</Button> 
            <Button type="info">信息</Button> 
            <Button type="disabled" size="small">禁用</Button> 
            <Button type="dashed">虚线框</Button> 
            <Button>默认</Button> 
        </div>
      `,
    }}
  </Story>
</Preview>

### 图标类型

<Preview>
  <Story name="icon 图标">
    {{
      components: { Button },
      template: `
        <div>
          <Button icon="setting">设置</Button>
          <Button icon="download">下载</Button>
          <Button icon="loading">加载</Button>
        </div>
      `,
    }}
  </Story>
</Preview>

### 图标位置

<Preview>
  <Story name="iconPosition 图标位置">
    {{
      components: { Button },
      template: `
        <div>
          <Button icon="download" iconPosition="left">图标在左</Button>
          <Button icon="download" iconPosition="right">图标在右</Button>
        </div>
      `,
    }}
  </Story>
</Preview>

### 加载状态

<Preview>
  <Story name="loading 加载状态">
    {{
      components: { Button },
      template: `<Button :loading="loading" @click="loading = !loading">点击显示加载状态</Button>`,
      data() {
        return { loading: false };
      },
    }}
  </Story>
</Preview>

### 按钮组

<Preview>
  <Story name="buttonGroup 按钮组">
    {{
      components: { Button, ButtonGroup },
      template: ` 
        <ButtonGroup>
          <Button icon="left">上一页</Button> 
          <Button icon="right" iconPosition="right">下一页</Button>
        </ButtonGroup>`,
    }}
  </Story>
</Preview>

## API

<Props of={Button} />
